<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>策略模式</title>
</head>
<body>

    <form action="#" id="form">
        <input type="text" name="username"></br>
        <input type="text" name="password"></br>
        <input type="text" name="phone"></br>
        <button type="submit">提交</button>
    </form>

    <script>
        
        // 代码可测性高,
        // 代码可扩展性高

        // 策略对象
        const strategies = {
            isNonEmpty: function(val, errMsg) {
                if (val === '') {
                    return errMsg;
                }
            },
            minLength: function(val, errMsg, length,) {
                if (val.length < length) {
                    return errMsg;
                }
            },
            isMobile: function(val, errMsg) {
                var res = !/(^1[3|5|8][0-9]{9}$)/.test(val)
                if (res) {
                    return errMsg;
                }
            }
        }


        // 校验对象
        var Validateor = function() {
            this.cache = [];
        }
        Validateor.prototype.add = function(value, rules) {
            var self = this;
            for (var i = 0, rule; rule = rules[i++];) {
                ;(function(rule) {
                    self.cache.push(function() {
                        return strategies[rule.action](value, rule.errMsg, rule.length)
                    })
                })(rule);
            }
        }

        Validateor.prototype.start = function() {
            for (var i = 0, validateorFn; validateorFn = this.cache[i++];) {
                    var errMsg = validateorFn();
                    if (errMsg) {
                    return errMsg;
                }
            }
        }


        var fromDom = document.getElementById('form')


        var validateorFn = function() {
            var validateor = new Validateor();
            validateor.add(fromDom.username.value, [
                {
                    action: 'isNonEmpty',
                    errMsg: '用户名不能为空'
                },
                {
                    action: 'minLength',
                    length: 8,
                    errMsg: '用户名长度不能少于8位'
                }
            ])

            validateor.add(fromDom.password.value, [
                {
                    action: 'minLength',
                    length: 8,
                    errMsg: '密码长度不能少于8位'
                }
            ])

            validateor.add(fromDom.phone.value,[
                {
                    action: 'isMobile',
                    errMsg: '请输入正确的手机号码'
                }
            ])

            let errMsg = validateor.start();
            return errMsg;
        }

        // 提交代码函数
        fromDom.onsubmit = function() {
            var errMsg = validateorFn();
            if (errMsg) {
                alert(errMsg);
                return false
            }
            alert('验证通过')
        }

    </script>
</body>
</html>